import React from 'react';
import { Toast } from 'antd-mobile';
import './continueSignin.css';

class ContinueSignin extends React.Component {
    constructor (props) {
        super(props);

        this.state = {
            list: [],
            continueSignDays: 0,
            nextSignGetCoins: 0,
            nextSignGetAward: 0
        };

        this.storage = {
        };
    }

    static getDerivedStateFromProps (props, state) {
        return {
            list: props.list,
            continueSignDays: props.list.filter((item) => {
                return item.is_sign;
            }).length,
            nextSignGetCoins: (props.list.find((item) => {
                return !item.is_sign;
            }) || {}).add_coin || (props.list[0] || {}).add_coin || 0,
            nextSignGetAward: (props.list.find((item) => {
                return !item.is_sign;
            }) || {}).activity || (props.list[0] || {}).activity || 0
        };
    }

    componentDidMount () {
    }

    handleSigninListItemClick (isSign) {
        if (isSign) { return; }
        Toast.info('连续签到可以获得奖励哦~');
    }

    render () {
        const awardClassNameMap = {
            0: '',
            1: 'lottery',
            2: 'redbag'
        };
        const awardTitleMap = {
            0: '',
            1: '抽奖奖励',
            2: '红包奖励'
        };
        const newRoundAddCoin = (this.state.list[0] || {}).add_coin || 0;

        return (
            <div className="continueSignin">
                <p className="title">连续签到<strong>{this.state.continueSignDays}</strong>天</p>
                <p className="tip">
                    明日签到可领 糗币<strong>{`+${this.state.nextSignGetCoins}  `}</strong>
                    {awardTitleMap[this.state.nextSignGetAward]}
                </p>
                <ul className="signinList">
                    {
                        this.state.list.map((item, index) => {
                            return (
                                <li
                                    key={index} className={item.is_sign ? 'signed' : ''}
                                    onClick={() => { this.handleSigninListItemClick(item.is_sign); }}
                                >
                                    <p className="days">{`第${item.day}天`}</p>
                                    <p className="coin">{`+${item.add_coin}`}<br />糗币</p>
                                    <div className={`award ${awardClassNameMap[item.activity]}`}></div>
                                </li>
                            );
                        })
                    }
                    <li onClick={() => { this.handleSigninListItemClick(false); }}>
                        <p className="days">新一轮</p>
                        <p className="coin">{`+${newRoundAddCoin}`}<br />糗币</p>
                        <div className="award"></div>
                    </li>
                </ul>
            </div>
        );
    }
}
export default ContinueSignin;
